<template>
  <div class="main-box">
    <div class="table-box flex overflow-hidden flex-1">
      <el-card class="area-other-table-card w-full h-full">
        <el-row>
          <div class="split-main w-full h-full bg-[#f2f3f5]">
            <splitpane :split-set="settingLR">
              <template #paneL>
                <div class="h-full flex">
                  <ZhenDuanLeft />
                </div>
              </template>
              <template #paneR>
                <div class="h-full ml-3">
                  <ZhenDuanOther class="h-full ml-3" />
                </div>
              </template>
            </splitpane>
          </div>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="tsx" name="ZhenDuanJieGuoWeiHu">
import splitpane, { ContextProps } from "@/components/ReSplitPane";
import { defineAsyncComponent, reactive } from "vue";
const ZhenDuanOther = defineAsyncComponent(
  () => import("@/views/DataMaintenance/ZhenDuanJieGuoWeiHu/components/ZhenDuanOther/ZhenDuanOther")
);
const ZhenDuanLeft = defineAsyncComponent(
  () => import("@/views/DataMaintenance/ZhenDuanJieGuoWeiHu/components/ZhenDuanLeft/ZhenDuanLeft")
);
const settingLR: ContextProps = reactive({
  minPercent: 20,
  defaultPercent: 20,
  split: "vertical"
});
</script>

<style lang="scss" scoped>
.area-search {
  margin-bottom: 10px;
  :deep(.el-form-item--default) {
    margin-bottom: 0;
  }
}
.area-other-table-card {
  :deep(.el-row) {
    width: 100%;
  }
}
:deep(.el-card__body) {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: var(--el-bg-color-page);
}
:deep(.el-form-item--default) {
  margin-bottom: 0;
}
</style>
